<template>
    <div class="content">
        <div class="chart-item">
            <div id="portExit" class="chart-item-1"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import mapJson from '@/mock/data/210100_full.json'
import mapJson1 from '@/mock/data/HK.json'

export default {
  name: 'index',
  data () {
    return {
      list: [],
      mapJsonData: mapJson,
      mapJsonData1: mapJson1
    }
  },
  methods: {
    traffic () {
      let myChart = echarts.init(document.getElementById('portExit'))
      // 指定图表的配置项和数据
      echarts.registerMap('HK', this.mapJsonData)
      myChart.setOption({
        title: {
          text: '香港18区人口密度 （2011）',
          subtext: '人口密度数据来自Wikipedia',
          sublink: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '香港18区人口密度',
            type: 'map',
            mapType: 'HK',
            label: {
              show: true
            },
            data: [
              { name: '法库县', value: 20057.34 },
              { name: '湾仔', value: 15477.48 },
              { name: '东区', value: 31686.1 },
              { name: '南区', value: 6992.6 },
              { name: '油尖旺', value: 44045.49 },
              { name: '深水埗', value: 40689.64 },
              { name: '九龙城', value: 37659.78 },
              { name: '黄大仙', value: 45180.97 },
              { name: '观塘', value: 55204.26 },
              { name: '葵青', value: 21900.9 },
              { name: '荃湾', value: 4918.26 },
              { name: '屯门', value: 5881.84 },
              { name: '元朗', value: 4178.01 },
              { name: '北区', value: 2227.92 },
              { name: '大埔', value: 2180.98 },
              { name: '沙田', value: 9172.94 },
              { name: '西贡', value: 3368 },
              { name: '离岛', value: 806.98 }
            ],
            // 自定义名称映射
            nameMap: { }
          }]
      })
    }
  },
  mounted () {
    this.traffic()
  }
}
</script>

<style scoped>
    .chart-item-1 {
        width: 90%;
        height: 300px;
    }

    .chart-item {
        width: 100%;
        height: 300px;
        text-align: -webkit-center;
    }

    .title-item {
        padding: 15px;
        font-size: 14px;
        color: #8b0000;
    }

    .title-item span {
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }

    .table-item {
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
    }

    .table-item1 {
        font-size: 10px;
        color: #00FFFF;
        font-weight: bold;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #00FFFF;
        border-left: 0;
        border-right: 0;
        margin-bottom: 10px;
    }

    .table-item2 {
        font-size: 10px;
        color: #00FF66;
        font-weight: bold;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #00FF66;
        border-left: 0;
        border-right: 0;
        margin-bottom: 10px;
    }

    .table-item3 {
        font-size: 10px;
        color: #FFCC00;
        font-weight: bold;
        text-align: right;
        border: 1px solid #FFCC00;
        border-left: 0;
        border-right: 0;
    }

    .table-item3 tr {
        height: 35px;
    }

    .table-item3 td {
        padding: 10px;
    }

    .table-item:first-child {
        /*  border-top: 1px solid #00FFFF;*/
    }

    .table-item:nth-child(2n+1) {
        /*  background: #dddddd;*/
    }

    .table-div {
        padding: 10px;
    }

    .van-col {
        padding: 10px 0;
    }

    .content >>> .van-progress__pivot {
        background-color: initial !important;
        color: #ffffff;
    }

    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag {
        margin-right: 1px;
    }
</style>
